<template>
  <div class="headd">
      <h2>{{obj.name}} &nbsp;&nbsp;</h2><br/>
      年龄：{{obj.age}}&nbsp;&nbsp;<br/>
      性别：{{obj.gender}}&nbsp;&nbsp;<br/>
      电话：{{obj.tel}}&nbsp;&nbsp;<br/>
      血型：{{obj.blood}}&nbsp;&nbsp;<br/>
      爱好：{{obj.hobby}}&nbsp;&nbsp;<br/>
      评价：{{obj.starLevel}}<br/>
       <button @click="handleBack">返回</button>
  </div>
</template>
<script>
export default{
  name:'Detail',
  data(){
    return{
      obj:{},
      genderArr:['男','女'],
      bloodArr:['A','AB','B','O','其他'],
      hobbyArr:[{value:'美食',label:'美食'},{value:'摄影',label:'摄影'},{value:'游戏',label:'游戏'},
                {value:'综艺',label:'综艺'},{value:'音乐',label:'音乐'}],
      starArr:[{label:'✩',value:'★✩✩✩✩'},
        {label:'✩',value:'★★✩✩✩'},
        {label:'✩',value:'★★★✩✩'},
        {label:'✩',value:'★★★★✩'},
        {label:'✩',value:'★★★★★'}],
    }
  },
  computed:{
    vuexClassMateArr(){
      return this.$store.state.classmateArr
    }
  },
  mounted(){
    console.log(typeof this.vuexClassMateArr[0].id,'idid类型',typeof this.$route.query.id,'routeid类型')
    console.log(this.vuexClassMateArr[0].id,'idid',this.$route.query.id,'routeid')
    let a = this.vuexClassMateArr.filter(item=>item.id==this.$route.query.id)
    console.log('filter的数据',a)
    this.obj=a[0]
    console.log(this.obj)
  },
  methods:{
    handleBack(){
      this.$router.push('/')
    }
  }
}
</script>
<style scoped>
.headd{
  margin:10px 0px 0px 10px
}
</style>